<template>
  <div class="big-box">
    <ul class="open-collection-card">
      <li v-for="v in books" :key="v.id">
        <router-link :to="'/BookDetail/' + v.id">
          <div class="content-top">
            <h3 class="content-title" v-cloak>{{ v.title }}</h3>
            <p v-cloak>{{ v.text }}</p>
          </div>
          <div class="content-bottom">
            <img :src="v.url" />
            <div>
              <p v-cloak>{{ v.name }}</p>
              <p v-cloak>{{ v.jie }}</p>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
    <Home />
    <Back1/>
  </div>
</template>

<script>
import Home from "../pages/Home.vue";
import Back1 from "./Back1.vue";

export default {
  name: "HotBooks",
  components: {
    Home,
    Back1
  },
  data() {
    return {
      books: [],
    };
  },
  created() {
    fetch("http://localhost:3000/books", {
      method: "get",
    })
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        this.books = data;
      });
  },
};
</script>

<style scoped>
[v-clock] {
  display: none;
}
a{
  color: rgb(238, 238, 238);
}
.big-box {
  margin-top: 0.48rem;
  display: flex;
}
.open-collection-card {
  color: rgb(238, 238, 238);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-bottom: 0.5rem;
}
.open-collection-card li {
  box-sizing: border-box;
  width: calc((100% - 0.45rem) / 2);
  height: 2.05rem;
  padding: 0.16rem;
  position: relative;
  border-radius: 0.05rem;
  margin-top: 0.15rem;
}
.content-title {
  font-size: 0.18rem;
  font-weight: 600;
}
.content-top p {
  margin-top: 0.16rem;
  font-size: 0.12rem;
  vertical-align: middle;
}
.content-bottom {
  display: flex;
  overflow: hidden;
  position: absolute;
  -webkit-box-align: center;
  align-items: center;
  max-width: 100%;
  bottom: 0.16rem;
}
.content-bottom > img {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
}
.content-bottom div {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-left: 0.06rem;
  padding-right: 0.16rem;
  max-width: 100%;
}
.content-bottom > div > p {
  font-size: 0.14rem;
  font-weight: 400;
}
.open-collection-card > li:nth-child(1) {
  background: linear-gradient(
        to top,
        rgba(201, 89, 29, 0.8) 0%,
        rgba(201, 89, 29, 0.3) 35%,
        rgb(201, 89, 29) 69%
      )
      center top / auto no-repeat,
    url(../../public/imgs/01.jpeg) center center / cover no-repeat;
}
.open-collection-card > li:nth-child(2) {
  background: linear-gradient(
        to top,
        rgba(196, 137, 69, 0.8) 0%,
        rgba(196, 137, 69, 0.3) 35%,
        rgb(196, 137, 69) 69%
      )
      center top / auto no-repeat,
    url(../../public/imgs/02.jpeg) center center / cover no-repeat;
}
.open-collection-card > li:nth-child(3) {
  background: linear-gradient(
        to top,
        rgba(59, 135, 88, 0.8) 0%,
        rgba(59, 135, 88, 0.3) 35%,
        rgb(59, 135, 88) 69%
      )
      center top / auto no-repeat,
    url(../../public/imgs/03.jpeg) center center / cover no-repeat;
}
.open-collection-card > li:nth-child(4) {
  background: linear-gradient(
        to top,
        rgba(148, 56, 53, 0.8) 0%,
        rgba(148, 56, 53, 0.3) 35%,
        rgb(148, 56, 53) 69%
      )
      center top / auto no-repeat,
    url(../../public/imgs/04.jpeg) center center / cover no-repeat;
}
.open-collection-card > li:nth-child(5) {
  background: linear-gradient(
        to top,
        rgba(41, 94, 76, 0.8) 0%,
        rgba(41, 94, 76, 0.3) 35%,
        rgb(41, 94, 76) 69%
      )
      center top / auto no-repeat,
    url(../../public/imgs/05.jpeg) center center / cover no-repeat;
}
.open-collection-card > li:nth-child(6) {
  background: linear-gradient(
        to top,
        rgba(194, 102, 102, 0.8) 0%,
        rgba(194, 102, 102, 0.3) 35%,
        rgb(194, 102, 102) 69%
      )
      center top / auto no-repeat,
    url(../../public/imgs/06.jpeg) center center / cover no-repeat;
}
.open-collection-card > li:nth-child(7) {
  background: linear-gradient(
        to top,
        rgba(64, 146, 189, 0.8) 0%,
        rgba(64, 146, 189, 0.3) 35%,
        rgb(64, 146, 189) 69%
      )
      center top / auto no-repeat,
    url(../../public/imgs/07.jpeg) center center / cover no-repeat;
}
.open-collection-card > li:nth-child(8) {
  background: linear-gradient(
        to top,
        rgba(200, 221, 39, 0.8) 0%,
        rgba(200, 221, 39, 0.3) 35%,
        rgb(200, 221, 39) 69%
      )
      center top / auto no-repeat,
    url(../../public/imgs/08.jpeg) center center / cover no-repeat;
}
.open-collection-card > li:nth-child(9) {
  background: linear-gradient(
        to top,
        rgba(224, 181, 17, 0.8) 0%,
        rgba(224, 181, 17, 0.3) 35%,
        rgb(224, 181, 17) 69%
      )
      center top / auto no-repeat,
    url(../../public/imgs/09.jpeg) center center / cover no-repeat;
}
.open-collection-card > li:nth-child(10) {
  background: linear-gradient(
        to top,
        rgba(245, 204, 5, 0.8) 0%,
        rgba(245, 204, 5, 0.3) 35%,
        rgb(245, 204, 5) 69%
      )
      center top / auto no-repeat,
    url(../../public/imgs/10.jpeg) center center / cover no-repeat;
}
.open-collection-card > li:nth-child(11) {
  background: linear-gradient(
        to top,
        rgba(159, 60, 60, 0.8) 0%,
        rgba(159, 60, 60, 0.3) 35%,
        rgb(159, 60, 60) 69%
      )
      center top / auto no-repeat,
    url(../../public/imgs/03.jpeg) center center / cover no-repeat;
}
.open-collection-card > li:nth-child(12) {
  background: linear-gradient(
        to top,
        rgba(237, 188, 0, 0.8) 0%,
        rgba(237, 188, 0, 0.3) 35%,
        rgb(237, 188, 0) 69%
      )
      center top / auto no-repeat,
    url(../../public/imgs/04.jpeg) center center / cover no-repeat;
}
.open-collection-card > li:nth-child(13) {
  background: linear-gradient(
        to top,
        rgba(237, 188, 0, 0.8) 0%,
        rgba(237, 188, 0, 0.3) 35%,
        rgb(237, 188, 0) 69%
      )
      center top / auto no-repeat,
    url(../../public/imgs/05.jpeg) center center / cover no-repeat;
}
.open-collection-card > li:nth-child(14) {
  background: linear-gradient(
        to top,
        rgba(12, 12, 12, 0.8) 0%,
        rgba(12, 12, 12, 0.3) 35%,
        rgb(12, 12, 12) 69%
      )
      center top / auto no-repeat,
    url(../../public/imgs/10.jpeg) center center / cover no-repeat;
}
</style>